<template>
  <AppLayout :nav-title="'员工管理'" :show-left-arrow="true" :show-tabbar="false">
    <PageLayout :loading="loading" :error="error" :empty="!loading && list.length === 0" @retry="reload">
      <div class="staff-list__toolbar">
        <van-search
          v-model="keyword"
          placeholder="搜索姓名/编号/手机号"
          show-action
          @search="onSearch"
          @cancel="onCancelSearch"
        />
        <van-button type="primary" round size="small" icon="plus" @click="goCreate">新增</van-button>
      </div>

      <div class="staff-list">
        <van-list
          v-model:loading="listLoading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoadMore"
        >
          <van-cell
            v-for="item in list"
            :key="item.id"
            :title="item.name"
            :label="`${item.employeeNo} · ${item.phone}`"
          >
            <template #right-icon>
              <van-tag type="primary">{{ item.genderName }}</van-tag>
              <van-button size="small" type="info" plain style="margin-left: 8px" @click="goEdit(item.id)">编辑</van-button>
            </template>
          </van-cell>
        </van-list>
      </div>
    </PageLayout>
  </AppLayout>
  
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getEmployeeList } from '@/api/store'

const router = useRouter()

const loading = ref(false)
const error = ref(false)
const listLoading = ref(false)
const finished = ref(false)
const list = ref([])
const page = ref(1)
const pageSize = ref(10)
const totalPages = ref(1)
const keyword = ref('')

const fetchList = async (reset = false) => {
  try {
    if (reset) {
      page.value = 1
      list.value = []
      finished.value = false
    }
    loading.value = page.value === 1
    listLoading.value = page.value > 1
    const { data } = await getEmployeeList({ page: page.value, pageSize: pageSize.value, keyword: keyword.value })
    const { list: rows, totalPages: tp } = data
    totalPages.value = tp
    list.value = list.value.concat(rows)
    finished.value = page.value >= totalPages.value
    error.value = false
  } catch (e) {
    console.error('获取员工列表失败:', e)
    error.value = true
  } finally {
    loading.value = false
    listLoading.value = false
  }
}

const onLoadMore = async () => {
  if (finished.value) return
  page.value += 1
  await fetchList(false)
}

const onSearch = async () => {
  await fetchList(true)
}

const onCancelSearch = async () => {
  keyword.value = ''
  await fetchList(true)
}

const reload = async () => {
  await fetchList(true)
}

const goCreate = () => {
  router.push({ name: 'StoreStaffEdit' })
}

const goEdit = (id) => {
  router.push({ name: 'StoreStaffEdit', params: { id } })
}

onMounted(async () => {
  await fetchList(true)
})
</script>

<style scoped lang="scss">
.staff-list__toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 0;
  background: #fff;
}

.staff-list {
  margin-top: 8px;
  background: #fff;
}
</style>